<template>
  <view :class="theme">
    <view class="relative oh">
      <swiper :autoplay="true" circular @change="changeBanner" style="height: 680rpx;">
        <swiper-item v-for="(banner, index) in goodsInfo.banners.list" :key="index">
          <u-image @click="previewImage(index)" width="100%" height="100%" :src="banner" />
        </swiper-item>
      </swiper>
      <label class="jc-center absolute bottom-30 right-40 fs-28 color-2 br-24"
        style="background-color: rgba(0,0,0,0.3); padding: 4rpx 22rpx;">
        {{ goodsInfo.banners.current + 1 }}/{{ goodsInfo.banners.list.length }}
      </label>
    </view>

    <view class="bg-2 br-10 m-30 p-30">
      <text class="multi-ellipsis color-3 fs-28 lh-2">{{ goodsInfo.name }}</text>
      <view class="mt-20 fd-row ai-center jc-sb">
        <label class="ai-baseline">
          <text class="color-15 fw-700">
            <text class="fs-40">{{ goodsInfo.price }}</text>
            <text class="ml-6">星核</text>
          </text>
        </label>
        <text class="color-3">已售{{ goodsInfo.sales }}件</text>
      </view>
    </view>

    <view class="bg-2 br-10 ml-30 mr-30">
      <label @click="uniNavigator({ url: '/pages/client/main/address?enabled_select_address=1' })" class="p-30">
        <text>选择地址</text>
        <text class="f1 ml-70 mr-30 multi-ellipsis">{{ address.remark || "全国包邮，偏远地区除外" }}</text>
        <u-icon size="20" color="#666" name="arrow-right" />
      </label>
    </view>

    <view class="bg-2 br-10 oh" style="margin: 30rpx 30rpx calc(150rpx + env(safe-area-inset-bottom));">
      <view class="rich-text" style="font-size: 0;" v-html="goodsInfo.content" />
    </view>

    <view class="fixed bottom-0 jc-sb bg-2"
      style="padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; left: var(--window-left); right: var(--window-right);">
      <button @click="buy" hover-class="tap-hover" style="margin: 16rpx 30rpx; line-height: 88rpx;"
        class="fd-row bg-6 br-16 color-2 jc-center">
        <text class="fs-36">购买</text>
      </button>
    </view>

    <u-popup v-model="showPopup.password" @input="changePopup($event, 'password')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="bg-2 oh br-20" style="width: 90vw;">
        <view class="mt-30 ai-center">
          <text class="mt-16 mb-30 color-6 fs-32 fw-700">请输入支付密码</text>
          <u-message-input @change="inputPayPassword" @finish="submit" focus width="80" :maxlength="6" space="5"
            dot-fill />
        </view>
        <view @click="uniNavigator({ url: `/pages/client/main/setPayPassword` })" hover-class="tap-hover"
          class="mt-10 mb-30 p-20 as-center ml-12 color-15" style="text-decoration: underline;">
          忘记支付密码？
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { debounce, uniNavigator } from "@/common/libs/utils";
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

const { theme, address } = useMapState(["theme", "address"]);
const goodsInfo = reactive({
  banners: {
    list: [] as any[],
    current: 0
  },
  name: "-",
  price: "0.00",
  sales: 0,
  goods_coin: 0,
  content: "",
  goods_type: 0,
  id: 0
});

const showPopup = reactive({
  password: false
});
const payPassword = ref("");
const changeBanner = ({ detail }: any) => {
  goodsInfo.banners.current = detail.current;
}
const previewImage = (current: number) => {
  uni.previewImage({ urls: goodsInfo.banners.list, current });
}
const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

onNavigationBarButtonTap(() => {
  uni.showToast({ title: "暂未开放", icon: "none" });
  return;
});

onLoad(({ id }: any) => {
  uni.request({
    url: "/goodsDetail",
    data: { id },
    success({ data }: any) {
      goodsInfo.id = data.id;
      goodsInfo.banners.list = data.goods_image.split(",");
      goodsInfo.name = data.goods_name;
      goodsInfo.price = data.goods_price;
      goodsInfo.goods_coin = data.goods_coin;
      goodsInfo.content = data.content;
      goodsInfo.goods_type = data.goods_type;
    }
  })
});

const submit = () => {
  uni.showToast({ icon: "loading", mask: true });
  uni.request({
    url: "/paymentInfo",
    data: {
      channel: goodsInfo.goods_type,
      order_type: 4,
      goods_id: goodsInfo.id,
      address_id: address.value.id,
      pay_pass: payPassword.value
    },
    success({ data, msg: title }: any) {
      if (+goodsInfo.goods_type === 3) {
        uni.showToast({ title });
        uni.navigateTo({ url: "/pages/client/main/orders" });
        return;
      }
      uni.hideToast();
      uniNavigator({ url: data.url });
    }
  });
  showPopup.password = false;
}

const buy = debounce(() => {
  if (!address.value.id) {
    uni.showToast({ title: "请选择收货地址", icon: "none" });
    uniNavigator({ url: '/pages/client/main/address?enabled_select_address=1' });
    return;
  }

  switch (goodsInfo.goods_type) {
    case 1:
      uni.navigateTo({ url: `/pages/client/main/pay?id=${goodsInfo.id}` });
      break;
    case 2:
    case 3:
      showPopup.password = true;
      break;
    default:
      break;
  }
});

const inputPayPassword = (val: string) => {
  payPassword.value = val;
}
</script>

<style lang="scss" scoped>
// scss
</style>